<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :md="4" :sm="24">
            <a-form-item label="关键字">
              <a-input placeholder="账号、名称、法人或电话" v-model="queryParam.orderCode"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="24">
            <a-form-item label="使用状态">
              <a-select placeholder="请选择" v-model="queryParam.ctype">
                <a-select-option value="1">开启</a-select-option>
                <a-select-option value="2">禁用</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="24">
            <a-form-item label="代理商类型">
              <a-select placeholder="请选择" v-model="queryParam.ctype">
                <a-select-option value="1">虚拟供应商</a-select-option>
                <a-select-option value="2">普通商家</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>

        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus"style="margin-left: 10px;margin-bottom: 2px" >添加</a-button>
    </div>
    <div>
<!--      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">-->
<!--        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项-->
<!--        <a style="margin-left: 24px" @click="onClearSelected">清空</a>-->
<!--      </div>-->
      <div>
<!--        <a-button type="primary" @click="showModal">-->
<!--          Open Modal-->
<!--        </a-button>-->
        <a-modal v-model="visible" title="商业权限管理" @ok="handleOk">
          <p>商家名称 R-one美妆官方商城 </p>
          <a-checkbox-group @change="onChange_q">
            <a-row>
              <a-col :span="4">
                <span>权限管理</span>
              </a-col>
              <a-col :span="20" >
                <a-checkbox value="A">
                  显示水印权限，没有该权限的不显示客户自己的水印
                </a-checkbox>
              </a-col>
              <a-col :span="20" :offset="4">
                <a-checkbox value="B" >
                  化妆教程权限，没有改权限的不显示化妆教程
                </a-checkbox>
              </a-col>
              <a-col :span="20" :offset="4">
                <a-checkbox value="C">
                  肤质检测权限-图像测肤，没有权限的不显示测肤按钮,
                </a-checkbox>
              </a-col>
              <a-col :span="20" :offset="4">
                <a-checkbox value="D">
                  肤质检测权限-接触测肤，没有权限的不显示测肤按钮
                </a-checkbox>
              </a-col>
            </a-row>
          </a-checkbox-group>
        </a-modal>

      </div>
      <a-table
        ref="table"
        bordered
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading">
        <span slot="action" slot-scope="text, record">
                    <a @click="jurisdiction(record)">权限</a>
                    <a-divider type="vertical"/>
                    <a @click="handleEdit(record)">编辑</a>
                    <a-divider type="vertical"/>
                   <a-popconfirm v-if="forbidden == true" title="确定停用吗?" @confirm="() => handleOpen(record.id)">
                      <a style="color: #ED3F14">停用</a>
                    </a-popconfirm>
                   <a-popconfirm v-if="forbidden == false" title="确定恢复吗?" @confirm="() => handleOpen1(record.id)">
                      <a style="color: #56CC66">恢复</a>
                    </a-popconfirm>
                  </span>
        <span slot="expandedRowRender" slot-scope="record" style="margin: 0">
<!--          <h3>管理员信息:</h3>-->
          <span>&nbsp&nbsp管理员账号:{{ record.orderDate }} &nbsp&nbsp 管理员名称:{{ record.orderDate }} &nbsp&nbsp 邮箱:{{ record.orderDate }} &nbsp&nbsp </span>
          <span style="margin-left: 30px;">&nbsp&nbsp电话:{{ record.orderDate }} &nbsp&nbsp 性别:{{ record.orderDate }} &nbsp&nbsp 账号开启状态:{{ record.orderDate }} &nbsp&nbsp </span>

        </span>
      </a-table>


    </div>
    <!-- table区域-end -->

    <!-- 表单区域 -->
    <role-modal ref="modalForm" @ok="modalFormOk"></role-modal>
  </a-card>
</template>

<script>
  import { getAction } from '@/api/manage'
  import RoleModal from '@/views/beautyMakeup/modules/RoleModal'
  import {JeecgListMixin} from '@/mixins/JeecgListMixin'

  export default {
    name: "ListDemo",   //美妆-商家管理-页面
    mixins: [JeecgListMixin],
    components: {
      RoleModal
    },
    data() {
      return {
        visible: false,
        ipagination: {
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30'],
          showTotal: (total, range) => {
            return range[0] + '-' + range[1] + ' 共' + total + '条'
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        forbidden:true,  //是否停用 恢复

        innerData: [],
        expandedRowKeys: [],
        id: ' ',
        description: '列表展开子表Demo',
        // 列表表头
      // {
      //   title: '',
      //     dataIndex: '',
      //   key: 'rowIndex',
      //   width: 60,
      //   align: "center",
      //   customRender: function (t, r, index) {
      //   return parseInt(index) + 1;
      // }
      // },
        columns: [
          {
            title: '商家账号',
            align: "center",
            dataIndex: 'orderCode'
          },
          {
            title: '商家名称',
            align: "center",
            dataIndex: 'ctype',
            customRender: (text) => {
              let re = "";
              if (text === '1') {
                re = "国内订单";
              } else if (text === '2') {
                re = "国际订单";
              }
              return re;
            }
          },
          {
            title: '公司法人',
            align: "center",
            dataIndex: 'orderDate'
          },
          {
            title: '公司电话',
            align: "center",
            dataIndex: 'orderMoney'
          },
          {
            title: '联系人',
            align: "center",
            dataIndex: 'content'
          },{
            title: '联系人电话',
            align: "center",
            dataIndex: 'orderCode'
          },
          {
            title: '营业执照',
            align: "center",
            dataIndex: 'ctype',
            customRender: (text) => {
              let re = "";
              if (text === '1') {
                re = "国内订单";
              } else if (text === '2') {
                re = "国际订单";
              }
              return re;
            }
          },
          {
            title: '水印图片',
            align: "center",
            dataIndex: 'orderDate'
          },
          {
            title: '详细地址',
            align: "center",
            dataIndex: 'orderMoney'
          },
          {
            title: '代理商属性',
            align: "center",
            dataIndex: 'content'
          },{
            title: '类别数',
            align: "center",
            dataIndex: 'ctype',
            customRender: (text) => {
              let re = "";
              if (text === '1') {
                re = "国内订单";
              } else if (text === '2') {
                re = "国际订单";
              }
              return re;
            }
          },
          {
            title: '使用状态',
            align: "center",
            dataIndex: 'orderDate'
          },
          {
            title: '开通有赞',
            align: "center",
            dataIndex: 'orderMoney'
          },
          {
            title: '测试账号',
            align: "center",
            dataIndex: 'content'
          },{
            title: '创建时间',
            align: "center",
            dataIndex: 'content'
          },
          {
            title: '操作',
            dataIndex: 'action',
            width:'160px',
            align: "center",
            scopedSlots: {customRender: 'action'},
          }],
        // 分页参数
        type: "radio",
        url: {  //查询、新增、编辑、权限编辑、账号停用、恢复
          list: "/test/order/orderList",
          delete: "/test/order/delete",
          deleteBatch: "/test/order/deleteBatch",
          customerListByMainId: "/test/order/listOrderCustomerByMainId",
        },
      }
    },
    computed: {
      currentId(){
        return this.id;
      }
    },
    methods: {
      handleExpand(expanded, record){
        this.expandedRowKeys=[];
        this.innerData=[];
        if(expanded===true){
          this.loading = true;
          this.expandedRowKeys.push(record.id);
          getAction(this.url.customerListByMainId, {mainId: record.id}).then((res) => {
            if (res.success) {
              this.loading = false;
              this.innerData = res.result.records;
            }
          });
        }
      },
      showModal() {
        this.visible = true;
      },
      handleOk(e) {
        console.log(e);
        this.visible = false;
      },
      // 权限
      jurisdiction(record){
        this.visible=true;
      },
      onChange_q(checkedValues) {
        console.log('checked = ', checkedValues);
      },
      // 是否禁用、启用
      handleOpen(){
        this.forbidden = false;
      },
      handleOpen1(){
        this.forbidden = true;
      },
    }
  }
</script>
<style scoped>
  .ant-card-body  {
    margin-bottom: 18px;
  }

  .table-operator {
    margin-bottom: 0px;
  }

  .ant-table-tbody .ant-table-row td {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .anty-row-operator button {
    margin: 0 5px
  }

  .ant-btn-danger {
    background-color: #ffffff
  }

  .ant-modal-cust-warp {
    height: 100%
  }

  .ant-modal-cust-warp .ant-modal-body {
    height: calc(100% - 110px) !important;
    overflow-y: auto
  }

  .ant-modal-cust-warp .ant-modal-content {
    height: 90% !important;
    overflow-y: hidden
  }
</style>